<template>
  <view class="wrap-fff" :style="colorStyle">
    <view v-if="freeze_status==1" class="box success-box">
      <view class="tip-box">
        <view class="ebao-iconfont ebao-duigou-yuan text-green"></view>
        <view class="title">支付成功</view>
        <view class="tip">工作人员可能会给您来电，请保持电话畅通</view>
      </view>
      <view class="btn-box">
        <view @click="goDetail" class="btn-square rd-36rpx btn-ghost">查看订单</view>
        <view v-if="showCompleteData" @click="goUserData()" class="btn-square rd-36rpx">去完善身份信息</view>
      </view>
    </view>



    <view v-if="freeze_status==0" class="box fail-box">
      <view class="tip-box">
        <view class="ebao-iconfont ebao-ic_close text-red"></view>
        <view class="title">支付失败</view>
        <view class="tip">请在<text class="text--w111-333 fw-bold">{{ finallyTime }}</text>内完成支付，超时后订单将自动关闭</view>
      </view>
      <view class="btn-box">
        <view @click="cancelOrder" class="btn-square rd-36rpx btn-ghost cancel">取消订单</view>
        <view @tap='zhimaCreatePre(orderInfo.id)' class="btn-square rd-36rpx">继续付款</view>
      </view>
      <view class="text-red mt-80 text-center" style="line-height: 1.5">如遇免押失败或冻结金额较多，可<text class="text-blue" style="padding: 0 4rpx;" @click="goGoodCall">联系客服<text class="iconfont icon-ic_customerservice fs-24 fw-bold"></text></text>进行人工审核，会提高您的审核通过率！！</view>
    </view>
    <chatModal ref="chatModal"></chatModal>
  </view>
</template>

<script>
import zhima from '@/mixins/zhima'
import colors from "@/mixins/color";
import {getUserInfo} from "@/api/user";
import {completeData} from "@/tools/user";
import {getOrderDetail, orderCancel, tradeCreate, zhimaCreate} from "@/api/order";
import moment from "moment";
import chatModal from "@/components/chatModal/index.vue";
export default {
  components: {chatModal},
  mixins: [colors,zhima],
  data() {
    return {
      order_id:'',
      showCompleteData:false,
      freeze_status:1,
      orderInfo:{},
      finallyTime:'00:00:00',
      timer:null
    }
  },
  onLoad(options){
    this.order_id = options.order_id
    this.getUserInfo()
    this.getOrderDetail()
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 客服
    goGoodCall() {
      this.$refs.chatModal.open()
    },
    getOrderDetail(){
      uni.showLoading()
      getOrderDetail(this.order_id).then(res=>{
        uni.hideLoading()
        this.freeze_status=res.data.order_lease.freeze_status
        this.orderInfo=res.data

        // 初始化倒计时
        this.updateRemainingTime();

        // 每秒更新一次
        this.timer = setInterval(() => {
          this.updateRemainingTime();
        }, 1000);
      })
    },

    updateRemainingTime() {
      const now = moment();
      const endOfDay = now.clone().endOf('day');
      const deadline = endOfDay.valueOf(); // 获取目标时间戳

      const nowTimestamp = now.valueOf();
      const diffInSeconds = Math.floor((deadline - nowTimestamp) / 1000);

      if (diffInSeconds <= 0) {
        clearInterval(this.timer);
        this.finallyTime = '00:00:00';
        return;
      }

      const hours = Math.floor(diffInSeconds / 3600);
      const minutes = Math.floor((diffInSeconds % 3600) / 60);
      const seconds = diffInSeconds % 60;

      this.finallyTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    },
    goDetail() {
      uni.redirectTo({
        url: `/pages/goods/lease_order_details/index?order_id=${this.order_id}`
      })
    },
    getUserInfo: function () {
      getUserInfo().then(async (res) => {
        this.showCompleteData=await completeData(res.data)
      })
    },
    goUserData(){
      uni.navigateTo({url:'/pages/users/user_add_data/index'})
    },
    cancelOrder(){
      let that=this
      uni.showModal({
        title: '提示',
        content: '是否确认取消订单？',
        success: function (res) {
          if (res.confirm) {
            orderCancel(that.order_id).then(() => {
              uni.navigateBack({})
              uni.showToast({
                title: '取消成功',
              })
            })
          }
        }
      });
    },
    // zhimaCreatePre() {
    //   let that = this
    //   //获取当前完整路径
    //   const pages = getCurrentPages(); // 获取页面栈
    //   const currentPage = pages[pages.length - 1]; // 当前页面
    //
    //   // 创建交易组件
    //   my.checkBeforeAddOrder({
    //     success({requireOrder, sceneId, sourceId}) {
    //       tradeCreate({
    //         oid: that.orderInfo.id,
    //         source_id: sourceId,
    //         path: currentPage.$page.fullPath
    //       }).then(res => {
    //         if (res.status === 200) {
    //           // 唤起去免押
    //           that.zhimaCreate(that.orderInfo.id)
    //         }
    //       })
    //     },
    //     fail({error, errorMessage}) {
    //       that.$util.Tips({title: '订单前置判断失败'})
    //     },
    //     complete(e) {
    //       // console.log(e)
    //     },
    //   })
    // },
    zhimaResult(res){
      if (res.resultCode == 9000) {
        this.goDetail()
        this.$util.Tips({title: '免押成功'})
      } else {
        this.$util.Tips({title: '免押失败'})
      }
    },
    // 创建芝麻免押订单
    // zhimaCreate() {
    //   zhimaCreate({
    //     oid: this.orderInfo.id
    //   }).then(res => {
    //     uni.hideLoading()
    //     if (res.status === 200) {
    //       my.tradePay({
    //         orderStr: res.data.orderStr, // 完整的支付参数拼接成的字符串，从 alipay.fund.auth.order.app.freeze 接口获取
    //         complete: (res) => {
    //           if (res.resultCode === '9000') {
    //             this.goDetail()
    //             this.$util.Tips({title: '免押成功'})
    //           } else {
    //             this.$util.Tips({title: '免押失败'})
    //           }
    //         }
    //       });
    //     }
    //   }).catch(err => {
    //     this.$util.Tips({
    //       title: err.msg,
    //       icon: 'error'
    //     });
    //     uni.hideLoading()
    //   })
    // },
  },
}
</script>

<style lang="scss" scoped>
.box{
  padding:150rpx 20rpx;
  .tip-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    .title{
      font-size: 36rpx;
      font-weight: bold;
      padding: 30rpx 0;
    }
    .ebao-iconfont{
      font-size:90rpx;
    }
    .tip{
      color: #999;
    }
  }
  .btn-box{
    display: flex;
    justify-content: space-between;
    margin-top: 100rpx;
    .btn-square{
      height: 80rpx;
      margin: 0 10rpx;
    }
    .btn-square{
      //width:48%;
      flex: 1;
    }
  }
}
.fail-box{
  .cancel{
    color: #f56c6c !important;
    border-color: #f56c6c !important;
  }
}
</style>